<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2024-03-29 10:04:26
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-04-09 10:05:35
 * @FilePath: \cxl-driving-training\src\views\questionManagement\questionComponent\Index.vue
-->
<template>
    <div :class="['q-box', props.type]">
        <div class="question-box">
            <div class="header-image">
                <img :src="info.userAvatar" alt="" />
                <div class="type">{{ props.type === 'question' ? '问' : '答' }}</div>
            </div>
            <div class="user-info">
                <h1>{{ info.phone }}</h1>
                <span>{{ info.createTime || info.signUp }}</span>
            </div>
        </div>
        <div class="question-content">{{ info.questionContent }}</div>
        <div class="question-img">
            <template v-for="(item, index) in info.answerImg" :key="index">
                <el-image
                    style="width: 80px; height: auto"
                    :src="item"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[item]"
                    :initial-index="4"
                    :preview-teleported="true"
                    :lazy="true"
                    fit="cover"
                />
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps(['type', 'info'])
</script>

<style scoped lang="scss">
.question-box {
    display: flex;
    align-items: center;
    .type {
        font-size: 12px;
        position: absolute;
        bottom: 2px;
        right: 4px;
        background-color: rgb(245, 140, 20);
        color: #fff;
        padding: 2px 4px;
        border-radius: 3px;
    }

    .header-image {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
        background-color: #666;
        margin-right: 16px;
        position: relative;
        img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }

    .user-info {
        h1 {
            font-size: 16px;
            font-weight: bold;
            color: #000;
        }
        span {
            font-size: 13px;
        }
    }
}
.question-content {
    font-size: 16px;
    color: #000;
    padding: 16px 0;
}
.q-box {
    margin-bottom: 16px;
}
.ask {
    box-sizing: border-box;
    padding: 0 0 0 16px;
    border-bottom: 1px solid #dcdfe6;
    margin-bottom: 16px;
    .type {
        background-color: rgb(21, 142, 255);
    }
    .question-content {
        box-sizing: border-box;
        font-size: 14px;
        padding: 0;
        margin: 8px 0 16px 64px;
    }
}

.question-img {
    display: flex;
    flex-wrap: wrap;
    margin: 8px 0 16px 64px;
    img {
        display: block;
        width: 200px;
    }
}
</style>
